<template>
    <div class="box">
        <headers title="首页"></headers>
        <searchs></searchs>
        <Swipers :swiper="swiper"></Swipers>

        <van-tabs v-model:active="active" animated>
            <van-tab title="标签 1">

                <van-grid :border="false" :column-num="4">
                    <van-grid-item v-for="(v, i) in navlist" :key="i">
                        <van-image :src="v.image_src" />
                    </van-grid-item>
                </van-grid>

                <div class="time">
                    <h4>
                        京东秒杀:
                        <van-count-down :time="time" @finish="onFinish">
                            <template #default="timeData">
                                <span class="block">{{ timeData.hours }}</span>
                                <span class="colon">:</span>
                                <span class="block">{{ timeData.minutes }}</span>
                                <span class="colon">:</span>
                                <span class="block">{{ timeData.seconds }}</span>
                            </template>
                        </van-count-down>
                    </h4>

                    <img v-if="isShow" src="../../../assets/tu1.png" alt="">
                </div>

                <van-grid :border="false" :column-num="2">
                    <van-grid-item v-for="(v, i) in list" :key="i"
                        :style="i % 2 == 0 ? { height: '20rem' } : { height: '29rem' }" @click="todetail(v.goods_id)">
                        <van-image
                            v-lazy="v.goods_small_logo ? v.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'"
                            :src="v.goods_small_logo ? v.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'" />
                        <div>{{ v.goods_name }}</div>
                    </van-grid-item>
                </van-grid>



                <div style="height: 5rem;"></div>

            </van-tab>
            <van-tab title="标签 2">内容 2</van-tab>
            <van-tab title="标签 3">内容 3</van-tab>
            <van-tab title="标签 4">内容 4</van-tab>
        </van-tabs>

        <div class="login" v-if="a == '未存'">
            <p>暂未登录,点击立即登录</p>
            <router-link to="/login">
                <van-button round type="success">立即登录</van-button>
            </router-link>
            <p @click="delFun">X</p>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { swiperdataApi, catitemsApi, categoriesApi, searchApi, detailApi } from "@/api/api";
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()

import headers from "@/components/headers.vue";
import Swipers from "@/components/swipers.vue";
import searchs from "@/components/searchs.vue";

let swiper = ref('');
const getswiperdataApi = () => {
    swiperdataApi().then((res) => {
        swiper.value = res.data.message;
    })
}
getswiperdataApi();

let navlist = ref("");
const getcatitemsApi = () => {
    catitemsApi().then((res) => {
        navlist.value = res.data.message;
    })
}
getcatitemsApi();

//倒计时
const time = ref(10 * 1000);
let isShow = ref(true);
const onFinish = () => {
    isShow.value = false;
}

let list = ref([]);
const getsearchApi = () => {
    searchApi().then((res) => {
        list.value = res.data.message.goods;
    })
}
getsearchApi();

let a = ref(localStorage.getItem('a') ? localStorage.getItem('a') : '未存')
const delFun = () => {
    a.value = '已存';
    localStorage.setItem('a', '已存')
}


const todetail = (goods_id) => {
    router.push({
        path: "/detail",
        query: { goods_id: goods_id },
    })
}

</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;
    overflow: auto;

    .login {
        width: 90%;
        position: fixed;

        background: #fcc;
        height: 5rem;
        bottom: 8rem;
        border-radius: 1rem;
        left: 5%;
        display: flex;
        align-items: center;

        p {
            margin: 0 2rem;
        }
    }

    .colon {
        display: inline-block;
        margin: 0 4px;
        color: #1989fa;
    }

    .block {
        display: inline-block;
        width: 22px;
        color: #fff;
        font-size: 12px;
        text-align: center;
        background-color: #1989fa;
    }


}
</style>